<template>
  <div class="detail">
    <el-row :gutter="20">
      <el-col :span="4"
        ><div class="grid-content bg-purple" @click="changeStatus2('grant', 0)">
          发放
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple" @click="changeStatus2('grant', 1)">
          未发放
        </div></el-col
      >
      <!-- <el-col :span="4"
        ><div class="grid-content bg-purple" @click="changeStatus2('grant', 0)">
          确认
        </div></el-col
      >
      <el-col :span="4"
        ><div
          class="grid-content bg-purple"
          @click="changeStatus2('confirm', 1)"
        >
          未确认
        </div>
      </el-col> -->
      <el-col :span="4"
        ><div class="grid-content bg-purple" @click="changeStatus2('grant', 3)">
          撤回
        </div></el-col
      >
    </el-row>
    <el-card class="box-card">
      工资单详情
      <el-table
        :data="ruleForm.xzStaff"
        border
        :summary-method="getSummaries"
        show-summary
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="id" type="index" label="序号" width="50" fixed="left">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" fixed="left"> </el-table-column>
        <el-table-column prop="organ" label="部门" width="100">
          <template slot-scope="scope">
            {{ scope.row.stationId.name }}
          </template>
        </el-table-column>
        <el-table-column prop="station" label="岗位" width="150">
          <template slot-scope="scope">
            {{ scope.row.organId.name }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" width="150"> </el-table-column>
        <el-table-column prop="_id" label="工号" width="210"> </el-table-column>
        <el-table-column prop="sid" label="证件号" width="210"> </el-table-column>
        <el-table-column prop="grant" label="发送状态">
          <template slot-scope="scope">
            {{
              scope.row.grant == 3
                ? "撤回"
                : scope.row.grant == 1
                ? "未发送"
                : scope.row.grant == 0
                ? "发送"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="basic" label="基本工资"> </el-table-column>
        <el-table-column prop="post" label="岗位工资"> </el-table-column>
        <el-table-column prop="dut" label="职位工资"> </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button @click="changeStatus(scope.row)">
              {{
                scope.row.grant == 3
                  ? "发送"
                  : scope.row.grant == 1
                  ? "发送"
                  : scope.row.grant == 0
                  ? "撤回"
                  : ""
              }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "APIDetail",

  data() {
    return {
      xzStaffs: [],
      ruleForm: {
        name: "",
        method: "",
        payMonth: "",
        mbname: "",
        xzStaff: [],
      },
    };
  },

  mounted() {
    this.ruleForm = JSON.parse(sessionStorage.getItem("xzStaff"));
    this.xzStaffs = JSON.parse(sessionStorage.getItem("xzStaff"))["xzStaff"];
  },

  methods: {
    async changeStatus2(field, status) {
      console.log(field, status);
      let id = JSON.parse(sessionStorage.getItem("xzStaff"))["_id"];
      console.log(id);
      // let {
      //   data: { data, code, msg },
      // } = await axios.get(
      //   "/xz/getDetail?id=" + id + "&field=" + field + "&status=" + status
      // );
      // console.log(data, "data");
      // if (code == 200) {
      //   this.$message.success(msg);
      //   this.ruleForm = data[0].xzStaff;
      // }
      let data = this.xzStaffs.filter((i) => i[field] == status);
      console.log(data);
      if (data) {
        this.ruleForm.xzStaff = data;
      } else {
        this.xzStaffs = this.ruleForm.xzStaff;
      }
    },
    async changeStatus(row) {
      console.log(row, "个人", this.ruleForm, "方案");
      if (row.grant == 1) {
        row.grant = 0;
      } else if (row.grant == 0) {
        row.grant = 3;
      } else if (row.grant == 3) {
        row.grant = 0;
      }
      console.log(row);
      let body = {
        xzStaff: row,
      };
      console.log(body);
      let {
        data: { code, msg, data },
      } = await axios.post(
        "/xz/editGrantStatus?id=" + row._id + "&_id=" + this.ruleForm._id,
        body
      );
      if (code == 200) {
        console.log(data, "修改状态");
        this.$message.success(msg);
        this.$router.go(-1);
      }
    },
    getSummaries(param) {
      const { columns, data } = param;
      // console.log(param);
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        // console.log(values);
        if (
          !values.every((value) => isNaN(value)) &&
          values.every((value) => value.toString().length < 6) &&
          values.every((value) => value.toString().length > 2)
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  height: 100vh;
  .el-table {
    height: auto;
  }
}
.el-row > .el-col .grid-content {
  height: 150px;
  background: white;
  text-align: center;
  font-size: 25px;
  line-height: 150px;
  vertical-align: middle;
  cursor: pointer;
}
.el-row {
  margin-bottom: 20px;
  height: 150px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>